<template>
	<view class="profile-container">
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="avatar" v-if="gender==1">
				<image src="/static/female.png" mode="aspectFill"></image>
			</view>
			<view class="avatar" v-else>
				<image src="/static/male.png" mode="aspectFill"></image>
			</view>
			<view class="user-info">
				<text class="username">{{username || '未登录'}}</text>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-list">
			<!-- 我的申请 -->
			<view class="menu-item" @click="navigateTo('/pages/my-apply/my-apply')">
				<view class="menu-item-left">
					<uni-icons type="flag" size="20" color="#007AFF"></uni-icons>
					<text>我的用车申请记录</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>

			<!-- 我的费用 -->
			<view class="menu-item" @click="navigateTo('/pages/my-cost/my-cost')">
				<view class="menu-item-left">
					<uni-icons type="wallet" size="20" color="#007AFF"></uni-icons>
					<text>我的费用记录</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>

			<!-- 修改密码 -->
			<view class="menu-item" @click="navigateTo('/pages/change-password/change-password')">
				<view class="menu-item-left">
					<uni-icons type="locked" size="20" color="#007AFF"></uni-icons>
					<text>修改密码</text>
				</view>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>

		<!-- 退出登录按钮 -->
		<view class="logout-btn">
			<button type="warn" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getUserInfo
	} from '../../api/data'
	const username = ref('')
	const gender = ref('')
	const userId = uni.getStorageSync('userId')
	onMounted(() => {
		const storedUsername = uni.getStorageSync('username')
		if (storedUsername) {
			username.value = storedUsername
		}
		getUser()
	})

	const getUser = async () => {
		const res = await getUserInfo(userId)
		if (res.code === 200) {
			gender.value = res.data.sex
		}
	}

	// 页面跳转
	const navigateTo = (url) => {
		uni.navigateTo({
			url
		})
	}

	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '提示',
			content: '确定要退出登录吗？',
			success: (res) => {
				if (res.confirm) {
					// 清除存储的用户信息
					uni.removeStorageSync('token')
					uni.removeStorageSync('username')
					uni.removeStorageSync('userId')

					// 跳转到登录页
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}
			}
		})
	}
	// 下拉刷新处理函数
	const onPullDownRefresh = async () => {
		try {
			await getUser()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		} catch (error) {
			uni.showToast({
				title: '刷新失败',
				icon: 'none'
			})
		} finally {
			uni.stopPullDownRefresh()
		}
	}

	defineExpose({
		onPullDownRefresh
	})
</script>

<style>
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.user-card {
		background-color: #fff;
		padding: 40rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.user-info {
		flex: 1;
	}

	.username {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.menu-list {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-item-left {
		display: flex;
		align-items: center;
	}

	.menu-item-left text {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	.logout-btn {
		padding: 40rpx;
	}

	.logout-btn button {
		width: 100%;
	}
</style>